<template>
<div>111</div>
  <div>
    <button @click="add">按钮</button>
    <h3>{{state.count}}</h3>
    <h1>{{double}}</h1>
  </div>
</template>
<script>
import {reactive,ref,onMounted,computed} from 'vue'
export default {
  // composition 的入口函数，在beforeCreate 之前调用。返回值作为模板渲染的上下文。
  setup(){
    //reactive将对象封装成响应式
    const state = reactive({count:1});
    //ref将值类型打包成响应式对象
    const num = ref(1);
    function add(){
      state.count++;
      num.value += 10;
    }

    const double = computed(()=>state.count * 2)

    return {
      state,add,double,num
    }
    

  }
}
</script>
<style scoped >

</style>
